<template>
  <div class="wizard-project">
    <div class="layout__header">
      <h1 class="title">
        <font-awesome-icon icon="sync-alt" /> Updater
      </h1>

      <h2 class="subtitle">
        {{ checkpoints.title }}
      </h2>
    </div>

    <div class="project__content">
      <div class="project__update">
        <ProjectUpdate project="checkpoints" />
      </div>

      <div class="project__description">
        <p>Now you need the data models required by the algorithm to carry out the nudification process. It is a mandatory component to use {{ $dream.name }}.</p>
        <p>Click "Start" to start the automatic download and installation. Approximately <strong>2 GB</strong> will be downloaded.</p>
      </div>
    </div>

    <div class="project__installation">
      <div class="project__overview">
        <figure>
          <font-awesome-icon icon="robot" />
        </figure>

        <h1 class="title">
          {{ checkpoints.title }}
        </h1>

        <h2>{{ checkpoints.description }}</h2>
      </div>

      <div class="project__settings text-center">
        <button class="button" @click="$dream.openPowerFolder()">
          <span class="icon"><font-awesome-icon icon="folder-open" /></span>
          <span>DreamPower</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { isNil } from 'lodash'
import { dreamtrack } from '~/modules/services'
import { requirements } from '~/modules/system'

const { dialog } = $provider.api
const { existsSync } = $provider.fs

export default {
  layout: 'wizard',

  middleware({ redirect }) {
    if (requirements.power.checkpoints) {
      redirect('/wizard/telemetry')
    }
  },

  computed: {
    checkpoints() {
      return dreamtrack.get('projects.checkpoints.about', {
        title: 'Checkpoints',
        description: 'Data models generated by the AI.',
      })
    },
  },

  methods: {
    showOpenDialog(path) {
      const dir = dialog.showOpenDialogSync({
        defaultPath: path,
        properties: ['openDirectory'],
      })

      if (isNil(dir)) {
        return path
      }

      if (!existsSync(dir[0])) {
        // ???
        return path
      }

      return dir[0]
    },

    changePower() {
      const dir = this.showOpenDialog(this.$settings.folders.cli)
      this.$settings.folders.cli = dir
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
